<!DOCTYPE html>
<html style="height:100%;background:url(./map.jpg) no-repeat;background-size:100%;">
<head>
	<meta charset="UTF-8">
	<title>Basic Dialog - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../uimaker/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../uimaker/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
	<div style="margin:20px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
	</div>
	<div id="dlg" class="easyui-dialog" title="海上" data-options="minimizable:true,maximizable:true,closable:true" style="width:1300px;height:600px;padding:0 20px;">
		<!-- <div style="padding:15px;height:570px;"> -->
			<div style="height:50%">
				<div class="easyui-layout" style="width:100%;height:100%;">
					<div data-options="region:'west',collapsible:false" title="xx区" style="width:550px;" >
						<table class="easyui-datagrid" title="Basic DataGrid" style="width:550px;height:180px">
							<thead>
								<tr>
									<th data-options="field:'itemid',width:60">序号</th>
									<th data-options="field:'productid',width:200">名称</th>
									<th data-options="field:'listprice',width:100">经度</th>
									<th data-options="field:'unitcost',width:100">纬度</th>
									<th data-options="field:'attr1',width:70,formatter:formatPrice">xx</th>
								</tr>
							</thead>
						</table>
					</div>
					<div data-options="region:'center',title:'规划'"></div>
				</div>
			</div>
			<div style="height:50%">
				<div class="easyui-layout" style="width:100%;height:100%;">
					<div id="p" data-options="region:'west',title:'方案',collapsible:false" title="West" style="width:30%;"></div>
					<div data-options="region:'center'" title="xx" style="width:40%;"></div>
					<div data-options="region:'east',collapsible:false" title="xx" style="width:30%;" ></div>
				</div>
			</div>
		<!-- </div> -->
	</div>
</body>
</html>
<script>
	$('.easyui-datagrid').datagrid({
	data:[
	{"productid":"某某某海域","productname":"Koi","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"1"},
	{"productid":"某某某海域","productname":"Dalmation","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"2"},
	{"productid":"某某某海域","productname":"Rattlesnake","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"3"},
	{"productid":"某某某海域","productname":"Rattlesnake","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"4"},
	{"productid":"某某某海域","productname":"Iguana","unitcost":83.12549,"status":"P","listprice":21.59424,"attr1":"xx","itemid":"5"}
],
    columns:[[
		{field:'itemid',title:'序号',width:60,align:"center"},
		{field:'productid',title:'名称',width:200},
		{field:'listprice',title:'经度',width:100},
		{field:'unitcost',title:'纬度',width:100},
		{field:'attr1',title:'xx',width:70,formatter:formatPrice}
    ]]
});
	function formatPrice(val,row){
		if (row.itemid == 0){
			return '<span style="color:#3d8bb9;">'+val+'</span>';
		} else if(row.itemid == 1) {
			return '<span style="color:#f62d25;">'+val+'</span>';
		}else if(row.itemid == 2) {
			return '<span style="color:#c57b10;">'+val+'</span>';
		}else if(row.itemid == 3) {
			return '<span style="color:#3ca33a;">'+val+'</span>';
		}else{
			return '<span style="color:#3d8bb9;">'+val+'</span>';
		}
	}
</script>